<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>数字连接实验A型</title>
    <style>
        table, th, td {
            border: 0px solid;
            border-collapse: collapse;
        }
        td {
            padding: 10px;
        }
        .btn {
            width: 70px;
            height: 70px;
            font-size: 30px;
        }
        #start_btn {
            width: 200px;
            height: 50px;
            font-size: 30px;
            margin-left: 5px;
        }
        #score {
            margin-left: 10px;
            font-size: 25px;
        }
        #time_used {
            margin-left: 10px;
            font-size: 25px;
        }
    </style>
</head>
<body>
<h1>数字连接实验A型</h1>
<p>请您依次点击从1到25的数字。</p>
<div id="game">
    <table>
        <tbody>
        <tr>
            <td><button id="1" class="btn">1</button></td>
            <td><button id="2" class="btn">2</button></td>
            <td><button id="3" class="btn">3</button></td>
            <td><button id="4" class="btn">4</button></td>
            <td><button id="5" class="btn">5</button></td>
        </tr>
        <tr>
            <td><button id="6" class="btn">6</button></td>
            <td><button id="7" class="btn">7</button></td>
            <td><button id="8" class="btn">8</button></td>
            <td><button id="9" class="btn">9</button></td>
            <td><button id="10" class="btn">10</button></td>
        </tr>
        <tr>
            <td><button id="11" class="btn">11</button></td>
            <td><button id="12" class="btn">12</button></td>
            <td><button id="13" class="btn">13</button></td>
            <td><button id="14" class="btn">14</button></td>
            <td><button id="15" class="btn">15</button></td>
        </tr>
        <tr>
            <td><button id="16" class="btn">16</button></td>
            <td><button id="17" class="btn">17</button></td>
            <td><button id="18" class="btn">18</button></td>
            <td><button id="19" class="btn">19</button></td>
            <td><button id="20" class="btn">20</button></td>
        </tr>
        <tr>
            <td><button id="21" class="btn">21</button></td>
            <td><button id="22" class="btn">22</button></td>
            <td><button id="23" class="btn">23</button></td>
            <td><button id="24" class="btn">24</button></td>
            <td><button id="25" class="btn">25</button></td>
        </tr>
        </tbody>
    </table>
<!--    <button id="1" class="btn">1</button>-->
<!--    <button id="2" class="btn">2</button>-->
<!--    <button id="3" class="btn">3</button>-->
<!--    <button id="4" class="btn">4</button>-->
<!--    <button id="5" class="btn">5</button>-->
<!--    <button id="6" class="btn">6</button>-->
<!--    <button id="7" class="btn">7</button>-->
<!--    <button id="8" class="btn">8</button>-->
<!--    <button id="9" class="btn">9</button>-->
<!--    <button id="10" class="btn">10</button>-->
<!--    <button id="11" class="btn">11</button>-->
<!--    <button id="12" class="btn">12</button>-->
<!--    <button id="13" class="btn">13</button>-->
<!--    <button id="14" class="btn">14</button>-->
<!--    <button id="15" class="btn">15</button>-->
<!--    <button id="16" class="btn">16</button>-->
<!--    <button id="17" class="btn">17</button>-->
<!--    <button id="18" class="btn">18</button>-->
<!--    <button id="19" class="btn">19</button>-->
<!--    <button id="20" class="btn">20</button>-->
<!--    <button id="21" class="btn">21</button>-->
<!--    <button id="22" class="btn">22</button>-->
<!--    <button id="23" class="btn">23</button>-->
<!--    <button id="24" class="btn">24</button>-->
<!--    <button id="25" class="btn">25</button>-->
</div>
<p id="time_used"></p>
<p id="score"></p>
<button id="start_btn">开始测试</button>

<script>
    var btns = document.querySelectorAll(".btn");
    var scoreTxt = document.getElementById("score");
    var timeUsedTxt = document.getElementById("time_used");
    var startBtn = document.getElementById("start_btn");
    var timeCount = 0;
    var timer = null;
    var score = 0;
    var clicked = [];

    function shuffle(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

    function initGame() {
        var nums = [];
        for (var i = 1; i <= 25; i++) {
            nums.push(i);
        }
        nums = shuffle(nums);
        for (var i = 0; i < btns.length; i++) {
            btns[i].innerHTML = nums[i];
        }
    }

    function startGame() {
        clicked = [];
        score = 0;
        scoreTxt.innerHTML = "";
        timeUsedTxt.innerHTML = "";
        initGame();
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = "white";
        }
        timer = setInterval(function() {
            timeCount++;
            if (timeCount === 1) {
                timeUsedTxt.innerHTML = "时间：00:" + "00";
            } else if (timeCount <= 1500) {
                var min = Math.floor(timeCount / 60);
                var sec = timeCount % 60;
                timeUsedTxt.innerHTML = "时间：" + (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
            } else {
                clearInterval(timer);
                for (var i = 0; i < btns.length; i++) {
                    btns[i].removeEventListener("click", function() {});
                }
                timeUsedTxt.innerHTML = "时间：00:00";
                alert("测试结束，得分：" + score + "，用时：" + scoreTxt.innerHTML);
            }
        }, 1000);
    }

    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function() {
            console.log(i)
            if (parseInt(this.innerHTML) === clicked.length + 1) {
                clicked.push(parseInt(this.innerHTML));
                this.style.backgroundColor = "green";
                if (clicked.length === 25) {
                    clearInterval(timer);
                    for (var i = 0; i < btns.length; i++) {
                        btns[i].removeEventListener("click", function() {});
                    }
                    alert("测试结束，得分：" + score + "，用时：" + timeUsedTxt.innerHTML);
                }
                score++;
                scoreTxt.innerHTML = "得分：" + score;
            } else {
                console.log(clicked.length)
                if (clicked.length > 0) {
                    btns[clicked[clicked.length - 1] - 1].style.backgroundColor = "red";
                }
                // clicked = [];
                // score--;
                scoreTxt.innerHTML = "得分：" + score;
            }
        });
    }

    startBtn.addEventListener("click", function() {
        timeCount = 0;
        startGame();
    });
</script>
</body>
</html>